<!-- Overall performance -->
<div *ngIf="issue">
    <div class="d-flex align-items-center">
        <img [attr.src]="getIssueIcon(issue.issue.name)" class="issue-icon mr-3" />
        <h3 class="mb-0">{{ issue.issue.name }}</h3>
    </div>

    <div class="d-flex flex-row align-items-stretch shadow mt-4">
        <div class="card w-50 left-card">
            <div class="card-body">
                <h5>Score</h5>

                <span class="current-rating">{{ issue.issue.score }}</span>
                <span class="max-rating">/100</span>
                <span class="current-assessment">{{ assessmentList[issue.issue.assesmentType + 1] }}</span>
            </div>
        </div>

        <div class="card w-50 right-card card-container">
            <div class="d-flex flex-row align-items-stretch">
                <div class="card w-50 left-card">
                    <div class="card-body">
                        <h5>Outlook</h5>
                        <span *ngIf="getIssueOutlook(issue.issue) && governanceProfile.fullProfile" class="pillar-current-rating">
                            {{ getIssueOutlook(issue.issue) }}
                            <img [attr.src]="'/assets/icons-svg/icon-outlook-'+(getIssueOutlook(issue.issue)).toLowerCase()+'.svg'" class="outlook-icon ml-2" />
                        </span>
                        <span *ngIf="!getIssueOutlook(issue.issue) || !governanceProfile.fullProfile" class="current-assessment">N/A</span>
                    </div>
                </div>

                <div class="card w-50 right-card">
                    <div class="card-body">
                        <h5>Weight</h5>
                        <span class="pillar-current-rating">{{ issue.weight }}</span>
                    </div>
                </div>
            </div>

            <div class="d-flex flex-row align-items-stretch">
                <div class="card w-50 left-card">
                    <div class="card-body">
                        <h5>Relative Position</h5>
                        <span class="pillar-current-rating">{{ issue.comparativeGroupRank }}</span><span class="pillar-max-rating">/{{ issue.comparativeGroupSize }}</span>
                    </div>
                </div>

                <div class="card w-50 right-card">
                    <div class="card-body">
                        <h5>Percentile</h5>
                        <span class="pillar-current-rating">{{ issue.percentile }}</span><span class="pillar-max-rating">{{ getPercentileOrdinal() }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div *ngIf="issue.issue.comment && governanceProfile.fullProfile">
        <h3 class="mt-5">Analyst Commentary</h3>
        <div class="card card-body shadow">
            <p [innerHtml]="issue.issue.comment"></p>
        </div>
    </div>
</div>

<div *ngIf="indicators" class="mt-5">
    <div class="d-flex">
        <h3 class="mr-auto">Indicators</h3>
        <h5 class="ml-auto mr-3">Score</h5>
    </div>
    <governance-indicator *ngFor="let indicator of indicators;let index = index" [indicatorIndex]="index" [indicator]="indicator" [companyId]="companyId"></governance-indicator>
</div>